<template>
  <div>
    <div class="order_info">
      <h3>订单详情</h3>
      <ul class="items">
        <li>
          <span>订单id：</span>
          {{orderinfo.id}}
        </li>
        <li>
          <span>会员名称：</span>
          {{orderinfo.accept_name}}
        </li>
        <li>
          <span>地址：</span>
          {{orderinfo.area}}
        </li>
        <li>
          <span>快递：</span>
          {{orderinfo.expressTitle}}
        </li>
        <li>
          <span>状态：</span>
          {{orderinfo.status}}
        </li>
        <li>
          <span>购买时间：</span>
          {{orderinfo.payment_time}}
        </li>
      </ul>
    </div>
    <div class="goodlist">
      <h3>订单商品列表</h3>
      <div class="goodlist_header">
        <Row>
          <Col span="10">商品</Col>
          <Col span="5">类型</Col>
          <Col span="9">价格</Col>
        </Row>
      </div>
      <div class="goodlist_content">
        <Row>
          <Col span="10" class="imgbox">
            <Row>
              <Col span="9" class="Uimg">
                <img :src="goodslist.imgurl">
              </Col>
              <Col span="15" class="title">{{goodslist.goods_title}}</Col>
            </Row>
          </Col>
          <Col span="5" class="type">{{goodslist.goods_no}}</Col>
          <Col span="9" class="price">{{goodslist.goods_price}}</Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderinfo: {},
      goodslist: {}
      // aa: {
      //   orderinfo: {
      //     id: 3,
      //     express_no: "",
      //     express_fee: 8,
      //     accept_name: "ivanyb",
      //     telphone: "",
      //     mobile: "186234234234",
      //     email: "",
      //     area: "江苏省,无锡市,惠山区",
      //     address: "城区",
      //     message: "dd",
      //     order_amount: 3307,
      //     orderstatus: "2"
      //   }
      // }
    };
  },
  mounted() {
    this.$axios({
      url: `admin/order/getorderdetial/${this.$route.params.id}`,
      method: "GET",
      // 由于在8080端口下去请求8899端口，涉及到跨域
      withCredentials: true
    }).then(res => {
      console.log(res);
      if (res.data.status == 0) {
        this.goodslist = res.data.message.goodslist[0];

        this.orderinfo = res.data.message.orderinfo;

        if ((this.orderinfo.status = 1)) {
          this.orderinfo.status = "待付款";
        } else if ((this.orderinfo.status = 2)) {
          this.orderinfo.status = "待发货";
        } else if ((this.orderinfo.status = 3)) {
          this.orderinfo.status = "已发货";
        } else if ((this.orderinfo.status = 4)) {
          this.orderinfo.status = "已签收";
        } else if ((this.orderinfo.status = 5)) {
          this.orderinfo.status = "已取消";
        }
      } else {
        this.$message.error("获取数据失败，请重新刷新页面");
      }
    });
    // this.$axios({
    //   url: "/admin/order/updateorder",
    //   method: "POST",
    //   data: this.aa,
    //   // 由于在8080端口下去请求8899端口，涉及到跨域
    //   withCredentials: true
    // }).then(res => {
    //   console.log(res);
    // });
  }
};
</script>

<style scoped>
ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.order_info {
  color: #000;
}
.order_info h3 {
  font-family: "微软雅黑";

  margin-bottom: 10px;
  font-size: 18px;
}
.order_info .items li {
  font-size: 16px;
  margin-bottom: 10px;
}
.order_info .items li span {
  display: inline-block;
  width: 100px;
}
.goodlist {
}
.goodlist h3 {
  font-size: 16px;
  color: #000;
  padding: 10px 0;
}
.goodlist_header {
  background-color: #fff;
  font-size: 14px;
  font-weight: bold;
  color: #909399;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.goodlist_content {
  height: 84px;
  line-height: 84px;
  background-color: #fff;
}
.goodlist_content .imgbox {
  padding-top: 10px; 
}
.imgbox img {
  display: block;
  height: 64px;
}
.imgbox .Uimg{
  padding-left: 10px;
}
.imgbox .title {
  padding-top: 10px;
  padding-right: 15px;
  display: block;
  height: 64px;
  line-height: 14px;
}
.imgbox .title span {
  display: block;
  height: 64px;
  line-height: 14px;
}
</style>

